<template>
  <div
    class="app-container flex flex-direction flex-sub"
    style="background: none; height: 100%; padding: 1rem"
  >
    <el-card shadow="never" class="box-card flex-sub" style="overflow: auto">
      <div class="div-query">
        <div class="collapse">
          <div class="collapse-header" @click="panelActive = !panelActive">
            <i
              class="collapse-header-icon"
              :class="[
                panelActive ? 'el-icon-caret-bottom' : 'el-icon-caret-top',
              ]"
            />
            {{ panelActive ? '隐藏' : '展开' }}查询条件
          </div>
          <div class="collapse-content">
            <el-collapse-transition>
              <div v-show="panelActive">
                <el-form size="small" label-position="right">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="网格名称" label-width="80px">
                        <el-input
                          v-model="form.name"
                          placeholder="请输入网格名称"
                          clearable
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="隔离时间" label-width="80px">
                        <el-date-picker
                          v-model="form.time"
                          type="datetimerange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          clearable
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item style="margin-left: 10px">
                        <el-button
                          type="primary"
                          icon="el-icon-search"
                          @click="search"
                          size="small"
                          style="margin-right: 10px"
                          >搜索</el-button
                        >
                        <el-button
                          icon="el-icon-delete"
                          @click="reset"
                          type="info"
                          size="small"
                          style="margin-right: 10px"
                          >重置</el-button
                        >

                        <el-button size="small" @click="getDataList">
                          <i class="el-icon-refresh" style="color: #606266" />
                          <span style="color: #606266">刷新</span>
                        </el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-collapse-transition>
          </div>
        </div>
      </div>

      <div style="margin-bottom: 8px">
        <el-button size="small" type="primary" @click="add">
          <i
            class="iconfont icon-xinzenghuizong"
            style="font-size: 13px; margin-right: 5px"
          />添加隔离
        </el-button>
      </div>

      <el-table
        size="medium"
        :data="dataList"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        border
        fit
        :default-sort="{ prop: 'startTime', order: 'descending' }"
        :header-cell-style="{ background: '#fafafa' }"
      >
        <el-table-column prop="name" align="center" label="网格名称">
        </el-table-column>
        <el-table-column prop="fullPathText" align="center" label="网格全路径">
        </el-table-column>
        <el-table-column prop="isolateAddress" align="center" label="隔离地点">
        </el-table-column>
        <el-table-column align="center" label="隔离声音" width="80">
          <template slot-scope="{ row }">
            {{ row.isolateVoice == 0 ? '不隔离' : '隔离' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="隔离弹框" width="80">
          <template slot-scope="{ row }">
            {{ row.isolatePopbox == 0 ? '不隔离' : '隔离' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="隔离地图" width="80">
          <template slot-scope="{ row }">
            {{ row.isolateMap == 0 ? '不隔离' : '隔离' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="startTime"
          align="center"
          label="隔离开始时间"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="endTime"
          align="center"
          label="隔离结束时间"
          width="150"
        >
        </el-table-column>
        <el-table-column prop="isolateReason" align="center" label="隔离原因">
        </el-table-column>
        <el-table-column
          prop="operator"
          align="center"
          label="操作人"
          width="100"
        >
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="{ row }">
            <el-tooltip effect="dark" content="详情" placement="top-start">
              <i
                class="iconfont icon-chakanxiangqing2 i-detail"
                @click="detail(row)"
              />
            </el-tooltip>

            <i class="iconfont icon-fengefu i-fengefu" />

            <el-tooltip effect="dark" content="编辑" placement="top-start">
              <i class="iconfont icon-bianji2 i-edit" @click="edit(row)" />
            </el-tooltip>
            <i class="iconfont icon-fengefu i-fengefu" />

            <el-tooltip effect="dark" content="删除" placement="top-start">
              <i
                class="iconfont icon-shanchu i-delete"
                @click="handleDelete(row)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

     <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pagination.pageNum"
        :limit.sync="pagination.pageSize"
        :page-sizes="pageSizeOptions"
        @pagination="getDataList()"
      />
    </el-card>

    <el-dialog
      :title="title"
      :visible.sync="showDialog"
      width="60%"
      top="80px"
      :before-close="clickCloseBtn"
      :close-on-click-modal="false"
    >
      <div v-if="!isDetail">
        <el-container>
          <el-main
            :style="{ 'max-height': maxHeightDialog }"
            class="container-main"
          >
            <div class="title">
              <span>填写信息</span>
            </div>
            <el-card
              class="card"
              shadow="never"
              style="background: #fafafa; min-height: 500px"
            >
              <el-form
                ref="ruleForm"
                size="small"
                :model="ruleForm"
                :rules="rules"
                label-width="120px"
                label-position="right"
              >
                <div>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="网格名称" prop="guid">
                        <treeselect
                          v-model="ruleForm.guid"
                          :options="gridTree"
                          placeholder="请选择网格名称"
                          @select="getGridNode"
                          :default-expand-level="Infinity"
                        >
                          <div slot="value-label" slot-scope="{ node }">
                            {{ node.raw.fullPathText }}
                          </div>
                        </treeselect>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="隔离地点" prop="isolateAddress">
                        <el-input
                          v-model="ruleForm.isolateAddress"
                          placeholder="请输入隔离地点"
                          clearable
                        ></el-input
                      ></el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="隔离声音">
                        <el-radio v-model="ruleForm.isolateVoice" :label="0"
                          >不隔离</el-radio
                        >
                        <el-radio v-model="ruleForm.isolateVoice" :label="1"
                          >隔离</el-radio
                        >
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="隔离弹框">
                        <el-radio v-model="ruleForm.isolatePopbox" :label="0"
                          >不隔离</el-radio
                        >
                        <el-radio v-model="ruleForm.isolatePopbox" :label="1"
                          >隔离</el-radio
                        >
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="隔离地图">
                        <el-radio v-model="ruleForm.isolateMap" :label="0"
                          >不隔离</el-radio
                        >
                        <el-radio v-model="ruleForm.isolateMap" :label="1"
                          >隔离</el-radio
                        >
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="隔离开始时间" prop="startTime">
                        <el-date-picker
                          v-model="ruleForm.startTime"
                          type="datetime"
                          placeholder="请选择隔离开始时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          style="width: 100%"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="隔离结束时间" prop="endTime">
                        <el-date-picker
                          v-model="ruleForm.endTime"
                          type="datetime"
                          placeholder="请选择隔离结束时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          style="width: 100%"
                          :picker-options="pickerOptions"
                        >
                        </el-date-picker
                      ></el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item label="隔离原因" prop="isolateReason">
                    <el-input
                      v-model="ruleForm.isolateReason"
                      placeholder="请输入隔离原因"
                      clearable
                    ></el-input
                  ></el-form-item>
                  <el-form-item label="操作人">
                    <el-input
                      v-model="operator"
                      placeholder="请输入操作人"
                      disabled
                    ></el-input
                  ></el-form-item>
                </div>
              </el-form>
            </el-card>
          </el-main>
          <el-footer>
            <el-button @click="cancel('ruleForm')" style="margin-right: 10px"
              >取 消</el-button
            >
            <el-button
              type="primary"
              @click="
                title == '新增网格隔离'
                  ? submitAdd('ruleForm')
                  : submitEdit('ruleForm')
              "
            >
              确定
            </el-button>
          </el-footer>
        </el-container>
      </div>
      <div v-else>
        <el-container>
          <el-main>
            <el-card class="card" shadow="never" style="border: 0">
              <el-descriptions
                border
                :column="2"
                :labelStyle="{ width: '120px' }"
              >
                <el-descriptions-item>
                  <template slot="label">网格名称 </template>
                  {{ gridIsoDetail.name }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">网格全路径 </template>
                  {{ gridIsoDetail.fullPathText }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 隔离地点 </template>
                  {{ gridIsoDetail.isolateAddress }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 隔离声音 </template>
                  {{ gridIsoDetail.isolateVoice == 0 ? '不隔离' : '隔离' }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 隔离弹框 </template>
                  {{ gridIsoDetail.isolatePopbox == 0 ? '不隔离' : '隔离' }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 隔离地图 </template>
                  {{ gridIsoDetail.isolateMap == 0 ? '不隔离' : '隔离' }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 隔离开始时间 </template>
                  {{ gridIsoDetail.startTime }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 隔离结束时间 </template>
                  {{ gridIsoDetail.endTime }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 隔离原因 </template>
                  {{ gridIsoDetail.isolateReason }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 操作人 </template>
                  {{ gridIsoDetail.operator }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-main>
          <el-footer>
            <el-button @click="showDialog = false">关闭</el-button>
          </el-footer>
        </el-container>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import warningManageApi from '@/api/warning-manage'
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import MyForm from '@/components/MyForm/index.vue'
import dataTableMixins from '@/mixins/data-table-mixins'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Treeselect,
    MyForm,
    Pagination,
  },
  mixins: [dataTableMixins],
  data() {
    return {
      title: null, // 标题
      showDialog: false, // 显示对话框
      isDetail: false, //是否详情
      // 搜索表单
      form: {
        name: null,
        guid: null,
        time: null,
      },
      searchList: [
        {
          type: 'input',
          label: '网格名称:',
          prop: 'name',
          placeholder: '请输入网格名称',
        },
        {
          type: 'date',
          label: '隔离时间:',
          prop: 'time',
          dateType: 'datetimerange',
        },
        { type: 'button' },
      ],
      tableList: [{}],

      gridIsoDetail: {}, //服务器详情

      selectedList: [], //选中列表数据
      // 添加列表
      ruleForm: {
        id: '',
        guid: null, //网格id
        isolateAddress: '',
        isolateVoice: '',
        isolatePopbox: '',
        isolateMap: '',
        startTime: '',
        endTime: '',
        isolateReason: '',
      },
      operator: this.$store.state.account.user.username,
      // 表单验证
      rules: {
        guid: [
          { required: true, message: '请选择隔离网格', trigger: 'change' },
        ],
        isolateAddress: [
          { required: true, message: '请输入隔离地点', trigger: 'change' },
        ],
        startTime: [
          { required: true, message: '请输入隔离开始时间', trigger: 'blur' },
        ],
        endTime: [
          { required: true, message: '请输入隔离结束时间', trigger: 'blur' },
        ],
        isolateReason: [
          { required: true, message: '请输入隔离原因', trigger: 'blur' },
        ],
      },
      gridTree: [], //网格树形列表
      isolateStatus: [
        { label: '正在隔离', value: 0 },
        { label: '已结束', value: 1 },
      ],
    }
  },
  computed: {
    // 结束时间必须大于开始时间
    pickerOptions() {
      let that = this
      return {
        disabledDate(timer) {
          let st = Date.parse(that.ruleForm.startTime)
          return timer.getTime() <= st
        },
      }
    },
  },
  created() {},
  mounted() {
    this.getDataList()
    this.getGrid()
  },
  methods: {
    // 获取列表分页数据
    getDataList() {
      let timeFrom = '',
        timeTo = ''
      if (Array.isArray(this.form.time)) {
        timeFrom = this.form.time[0]
        timeTo = this.form.time[1]
      }

      warningManageApi
        .getGridIsolationList({
          ...this.pagination,
          ...this.form,
          startTime: timeFrom,
          endTime: timeTo,
          isolateType: 'grid',
        })
        .then((res) => {
          if (res.status === 200) {
            this.dataList = res.data.data.rows
            this.total = res.data.data.total
          } else {
            this.$message.error('获取服务器列表失败,请重试!')
          }
        })
    },
    // 获取网格列表
    getGrid() {
      warningManageApi.getGridTree().then((res) => {
        if (res.status === 200) {
          // console.log(res.data.data.rows, '网格列表')
          this.gridTree = res.data.data.rows
        }
      })
    },
    // 多选
    handleSelectionChange(val) {
      // console.log(val, '选中')
      this.selectedList = val // 存储选中数据
    },
    // 搜索
    search() {
      this.pagination.pageNum = 1
      this.getDataList()
    },

    // 重置
    reset() {
      this.createdTime = null
      Object.keys(this.form).forEach((key) => {
        this.form[key] = null
      })
      Object.keys(this.ruleForm).forEach((key) => {
        this.ruleForm[key] = null
      })
      this.search()
    },
    // 取消
    cancel(formName) {
      Object.keys(this.ruleForm).forEach((e) => {
        this.ruleForm[e] = null
      })
      this.$refs[formName].resetFields()
      this.showDialog = false
    },
    // 关闭按钮
    clickCloseBtn(done) {
      Object.keys(this.ruleForm).forEach((e) => {
        this.ruleForm[e] = null
      })
      done()
    },
    // 新增
    add() {
      this.title = '新增网格隔离'
      this.showDialog = true
      this.isDetail = false
    },
    // 提交新增
    submitAdd(formName) {
      const params = { ...this.ruleForm, operator: this.operator }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          warningManageApi.addGridIsolation(params).then((res) => {
            if (res.status === 200) {
              this.$message({
                message: '添加成功!',
                type: 'success',
              })
              this.$refs[formName].resetFields()
              this.reset()
              this.showDialog = false
            } else {
              this.$message.error('添加失败,请重试!')
            }
          })
        } else {
          return false
        }
      })
    },
    // 删除
    handleDelete(val) {
      this.$confirm('是否删除该网格隔离?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(
        () => {
          warningManageApi
            .deleteGridIsolation({
              id: val.id,
            })
            .then((res) => {
              if (res.status === 200) {
                this.$message({
                  message: '删除成功!',
                  type: 'success',
                })
                this.reset()
                this.showDialog = false
              } else {
                this.$message.error('删除失败,请重试!')
              }
            })
        },
        () => {}
      )
    },
    // 详情
    detail(val) {
      warningManageApi.getGridIsolationDetail({ id: val.id }).then((res) => {
        if (res.status === 200) {
          this.gridIsoDetail = res.data.data[0]
          this.title = '网格隔离 ＞详情'
          this.showDialog = true
          this.isDetail = true
        } else {
          this.$message.error('打开详情失败')
        }
      })
    },
    // 编辑
    edit(val) {
      // console.log(val, '编辑')
      this.isDetail = false
      this.showDialog = true
      this.title = '编辑网格隔离'
      Object.keys(this.ruleForm).forEach((key) => {
        Object.keys(val).forEach((_key) => {
          if (key == _key) {
            this.ruleForm[key] = val[_key]
          }
        })
      })
    },
    // 提交编辑
    submitEdit(formName) {
      const params = { ...this.ruleForm, operator: this.operator }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          warningManageApi.updateGridIsolation(params).then((res) => {
            if (res.status === 200) {
              this.$message({
                message: '编辑成功!',
                type: 'success',
              })
              this.$refs[formName].resetFields()
              this.showDialog = false
              this.reset()
            } else {
              this.$message.error('编辑失败,请重试!')
            }
          })
        }
      })
    },
    // 自定义树形控件键名
    normalizer(node) {
      return {
        id: node.guid,
        label: node.label,
        children: node.children,
      }
    },
    // 获取网格节点数据
    getGridNode(node) {},
  },
}
</script>

<style lang="scss" scoped>
@import '../../../../styles/part-custom';
</style>
